<template>
  <div class="h-100 w-100">
    <div style="height: 80px">
      <tablleBar
        @submit-swich="swichTable"
        :list="['全部', '规划', '施工', '竣工']"
      ></tablleBar>
    </div>
    <div style="height: calc(100% - 80px)" class="d-flex contain">
      <div class="contain_item" v-for="(item, index) in list">
        <div
          style="width: 70px; height: 100%; margin-top: 10px; margin-left: 10px"
        >
          <img :src="item.img" alt="" style="width: 100%; height: 70px" />
        </div>
        <div class="comment ms-2 d-flex justify-content-around">
          <div>
            {{ item.label }}
          </div>
          <div style="color: #00fff6; font-size: 26px">{{ item.count }}</div>
          <div>个</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import tablleBar from "@/components/project/tablleBar.vue";
import img1 from "@/assets/image/jianshe/all1.png";
import img2 from "@/assets/image/jianshe/all2.png";
import img3 from "@/assets/image/jianshe/all3.png";
import img4 from "@/assets/image/jianshe/all4.png";
import { use } from "echarts";
import { useFunc } from "@/hook/useFunc";

const props = defineProps({
  allData: {
    type: Object,
    default: () => ({}),
  },
  selectValue: {
    type: Number,
    default: 2024,
  },
});
const activeItem = ref(0);
const swichTable = (item: any) => {
  activeItem.value = item;
};

const list = computed(() => {
  console.log(props.allData[props.selectValue], activeItem.value, "fnje");
  const obj =props.allData[props.selectValue];
  
  let current = obj ? obj[activeItem.value] : [0, 0, 0, 0];

  const arr = [
    { label: "区建设局", img: img1 },
    { label: "区园林局", img: img2 },
    { label: "区房管局", img: img3 },
    { label: "区水务局", img: img4 },
  ];

  return arr.map((item, index) => ({
    ...item,
    count: current[index],
  }));
});

</script>

<style scoped lang="less">
.contain {
  display: flex;
  flex-wrap: wrap;
  &_item {
    width: 45%;
    height: 90px;
    display: flex;
    box-shadow: inset 0px 0px 4px 1px #5adbf9;
    margin-left: 30px;
  }

  .comment {
    font-size: 20px;
    line-height: 90px;
    font-family: "OPPOSans-Regular";
    color: #c6d1db;
    width: 160px;
  }
}
</style>
